body {
	background: #70828f url(../images/bg.png) repeat-x;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}
a {
	color: #39c;
}

h1 {
	height: 66px;
	background: url(../images/title.jpg) no-repeat center top;
	overflow: hidden;
	text-indent: -5000px;
	margin-bottom: 41px;
}


header, article {
	margin: 0 auto;
	text-align: left;
	position: relative;
	}
	header {
		background: url(../images/main.jpg) no-repeat;
		height: 455px;
		width: 980px;
		}
		header ul {
			width: 261px;
			padding-top: 26px;
			}
			header ul li {
				height: 38px;
				line-height: 38px;
				font-size: 14px;
				text-transform: uppercase;
				text-align: right;
				margin-bottom: 2px;
				-webkit-text-shadow: 0 0 5px white;
				-moz-text-shadow: 0 0 5px white;
				text-shadow: 0 0 5px white;
			}
		#iphone {
			position: absolute;
			background: url(../images/main-iphone.png) no-repeat;
			width: 152px;
			height: 295px;
			left: 740px;
			top: 145px;
		}
		#buy {
			display: block;
			position: absolute;
			width: 194px;
			height: 70px;
			background: url(../images/buy-button.jpg) no-repeat;
			top: 307px;
			left: 127px;
			overflow: hidden;
			line-height: 69px;
			text-indent: 300px;
		}
		#pages-jump {
			display: block;
			position: absolute;
			width: 482px;
			height: 260px;
			top: 29px;
			left: 302px;
			overflow: hidden;
		}
		#mobile-jump {
			display: block;
			position: absolute;
			width: 120px;
			height: 157px;
			top: 198px;
			left: 755px;
			overflow: hidden;
		}
		#pages-jump .animated,
		#mobile-jump .animated {
			position: absolute;
			left: 0;
			top: 0;
		}
	
	article {
		padding-left: 341px;
		width: 639px;
		}
		article aside {
			width: 314px;
			position: absolute;
			left: 0;
			top: 0;
			}
			article aside ul li {
				background: url(../images/point-bg.jpg) no-repeat;
				height: 61px;
				padding: 19px 0 0 85px;
				margin-bottom: 3px;
				color: #989898;
				font-size: 14px;
				line-height: 18px;
				position: relative;
				}
				article aside ul li span {
					display: block;
					position: absolute;
					left: 5px;
					top: 4px;
					height: 70px;
					width: 69px;
					font-size: 36px;
					font-weight: bold;
					-webkit-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
					-moz-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
					text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
					color: white;
					line-height: 70px;
					text-align: center;
				}
				article aside ul li strong {
					color: white;
				}
		
		article section {
			background: url(../images/block-bg.jpg) repeat-y;
			position: relative;
			padding: 57px 42px 42px;
			}
			article section .top {
				position: absolute;
				background: url(../images/block-top.jpg) no-repeat;
				height: 27px;
				top: 0;
				left: 0;
				right: 0;
			}
			article section .bottom {
				position: absolute;
				background: url(../images/block-bottom.jpg) no-repeat bottom;
				height: 27px;
				left: 0;
				right: 0;
				bottom: 0;
			}
			
			article section h2 {
				position: absolute;
				background: url(../images/h2-bg.jpg) no-repeat;
				padding-left: 18px;
				left: 28px;
				top: 13px;
				}
				article section h2 span {
					display: block;
					height: 36px;
					line-height: 34px;
					color: white;
					font-size: 17px;
					padding-right: 18px;
					background: url(../images/h2-bg.jpg) no-repeat right top;
				}
			
			.post-it {
				position: absolute;
				top: 9px;
				right: 3px;
				width: 232px;
				height: 240px;
				background: url(../images/post-it.jpg) no-repeat;
				color: #666633;
				font-size: 14px;
				line-height: 18px;
				}
				.post-it div {
					padding: 32px 0 0 35px;
				}
				.post-it h3 {
					font-size: 24px;
					line-height: 22px;
					margin-bottom: 15px;
					}
					.post-it h3 strong {
						font-size: 30px;
					}
				.post-it p {
					margin-bottom: 10px;
					font-weight: bold;
				}
				.post-it a {
					color: #666633;
					}
					.post-it a:hover {
						color: #9f9f69;
					}
			.with-post-it {
				margin-right: 210px;
			}
			
			.encart {
				display: block;
				background: #e4e4e4;
				padding: 10px;
				margin-top: 10px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				-webkit-background-clip: padding-box;
				border-radius: 10px;
				font-size: 14px;
				color: #333;
				text-align: center;
				-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
				-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
				}
				.encart:hover {
					color: #666;
				}
			.left-encart {
				float: left;
				width: 120px;
			}
			.with-left-encart {
				margin-left: 175px;
			}

.separator {
	margin: 15px -19px;
	border-top: 1px dotted #ccc;
}

.bullet-list li {
	margin-bottom: 9px;
	background: url(../images/bullet.gif) no-repeat 0 2px;
	padding-left: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.icon-list li {
	float: left;
	background: url(../images/corner.jpg) no-repeat right bottom;
	padding: 7px 26px 21px 61px;
	width: 98px;
	height: 45px;
	margin-top: 9px;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", Arial, Helvetica, sans-serif;
	}
	.icon-list li a {
		display: block;
		margin: -7px -26px -21px -61px;
		padding: 7px 26px 21px 61px;
		width: 98px;
		height: 45px;
		}
		.icon-list li a:hover {
			color: #33CCFF;
		}
	.icon-list li small {
		font-size: 12px;
		font-weight: normal;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		vertical-align: 20%;
		color: #808080;
	}
	.icon-list li .icon {
		display: block;
		float: left;
		width: 48px;
		height: 48px;
		margin: -3px 0 0 -54px;
		background-position: center center;
		background-repeat: no-repeat;
	}

.gallery {
	padding-top: 5px;
	}
	.gallery li {
		width: 121px;
		height: 102px;
		line-height: 102px;
		float: left;
		text-align: center;
		vertical-align: middle;
		color: #999999;
		}
		.gallery.with-encart li {
			width: 121px;
		}
		.gallery li img {
			border: 1px solid white;
			background: #efefef;
			background: rgba(0, 0, 0, 0.2);
			-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
			-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
			box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
			vertical-align: middle;
			margin-top: -4px;
			-moz-transition: all 250ms;
			-webkit-transition: all 250ms;
			-o-transition: all 250ms;
			transition: all 250ms;
			}
			.gallery li a:hover img {
				padding: 4px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-webkit-background-clip: padding-box;
				border-radius: 5px;
				margin: -8px -5px -4px;
				-moz-transition: all 100ms;
				-webkit-transition: all 100ms;
				-o-transition: all 100ms;
				transition: all 100ms;
			}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.icon-list:after,
.gallery:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.icon-list,
.gallery {
	display: inline-block;
}

* html .icon-list,
* html .gallery {
	height: 1%;
}

.icon-list,
.gallery {
	display: block;
}

footer {
	margin-top: 30px;
	background: #314250 url(../images/footer-bg.png) repeat-x;
	padding: 20px;
	color: #999;
}